<template>
	<view v-if="visible" class="loading-wrapper">
		<view class="loading-content flex-col flex-ali-cen flex-jus-cen">
			<view class="load_in" :class="loadingFlag == 1 ? 'load_in_ani' : ''">
				<uni-icons type="spinner-cycle" size="35" color="var(--grey-text)"></uni-icons>
			</view>
			<view class="flex-row flex-jus-cen" style="margin-top: 10rpx;">
				<view class="load-text" :class="loadingFlag == 1 ? 'dots' : ''">{{ text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				text: "加载中",
				loadingFlag: 0
			};
		},
		methods: {
			show(text = "加载中") {
				this.text = text
				this.visible = true
				this.loadingFlag = 1
			},
			hide() {
				setTimeout(()=>{
					this.loadingFlag = 0
					this.visible = false
				},250)
			},
		},
	};
</script>

<style scoped lang="scss">
	.loading-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.loading-content {
		background-color: var(--bg-center-color);
		height: 200rpx;
		width: 260rpx;
		border-radius: 10rpx;
	}

	.load-text {
		font-size: 30rpx;
		color: var(--grey-text);
		letter-spacing: 2rpx;
	}

	.load_in_ani {
		animation: rotateAnimation 3s linear infinite;
	}
	@keyframes rotateAnimation {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
	/* 闪烁效果 */
	.dots {
	  animation: blink 1.5s steps(2, end) infinite;
	}
	
	@keyframes blink {
	  0% {
	    opacity: 1;
	  }
	  25% {
	    opacity: 0.25;
	  }
	  50% {
	    opacity: 0.5;
	  }
	  75% {
	    opacity: 0.75;
	  }
	  100% {
	    opacity: 1;
	  }
	}



	// /* 动态波浪文字效果 */
	// .wave-text {
	// 	display: inline-block;
	// 	font-size: 32rpx;
	// 	color: var(--grey-text);
	// 	background-image: linear-gradient(90deg, var(--grey-text), var(--grey-text), var(--text-color), var(--white-text));
	// 	background-size: 200% 100%;
	// 	background-clip: text;
	// 	-webkit-background-clip: text;
	// 	color: transparent;
	// 	animation: waveTextAnimation 1.5s linear infinite;
	// }

	// /* 波浪动画 */
	// @keyframes waveTextAnimation {
	// 	0% {
	// 		background-position: 0% 50%;
	// 	}

	// 	100% {
	// 		background-position: 100% 50%;
	// 	}
	// }
</style>